<template>
	
	<div style="padding-bottom: 8.7rem;">
		
		<!--banner-->
		<div>
			<swiper loop auto :list="newBanner" :index="demo07_index" @on-index-change="demo07_onIndexChange"></swiper>
		</div>
		
		<div style="padding: 0.5rem;">
			<flexbox>
		      <flexbox-item :span="2"><div class="flex-demo">
		      	<img style="width: 3rem;height: 3rem;border-radius: 50%;" :src="user_info.avatar_url"/>
		      </div></flexbox-item>
		      <flexbox-item><div class="flex-demo" style="text-align: left;line-height: 1rem;">
		      	<div style="font-size: 0.9rem;">{{user_info.level_name}}</div>
		      	<div style="font-size: 0.9rem;">{{user_info.nickname}}</div>
		      	<div  style="font-size: 0.4rem;">有效期至:{{user_info.expiry_time}}</div>
		      </div></flexbox-item>
		    </flexbox>
		</div>
		
		<div style="padding-top: 0.5rem;background: #E1E1E1;border-bottom: solid 1px #868686;"> 
			<div style="background: #C4C4C4;padding-left: 0.5rem;line-height: 2rem;font-weight: bold;">不同级别会员的好处</div>
			<div v-for="(item,index) in level_list"> 
				<div style="background: #FFFFFF;padding: 0.5rem;" @click="choiceLevel(index)">
					<flexbox>
				      <flexbox-item :span="1"><div class="flex-demo">
				      	<span v-if="item.choiceDetail == true" style="font-size: 2rem;" class="iconfont icon-weixuanzhongyuanquan"></span>
			      	    <span v-else style="font-size: 2rem;" class="iconfont icon-selected"></span>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo">
				      	<img style="width: 100%;" :src="item.cover_pic"/>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="text-align: left;line-height: 2rem;">
				      	<div>名称:{{item.name}}</div>
				      	<div>时间:1年</div>
				      	<div v-if="item.price != '' && item.price != 0.00">价格:￥{{item.price}}</div>
				      </div></flexbox-item>
				    </flexbox>
				</div>
				<div style="font-size: 0.8rem;background: #FFFFFF;padding: 0 0.5rem 0.5rem 0.5rem;">
					<div style="height: 3.5rem;">{{item.descript}}</div>
					<div style="text-align: right;color: #858585;">
						点击查看详情
						<img style="width: 0.3rem;" src="../../static/image/icon-balance-right.png" />
						<img style="width: 0.3rem;" src="../../static/image/icon-balance-right.png" />
					</div>
				</div>
			</div>
			
		</div>
		
		<div style="padding-top: 0.5rem;background: #E1E1E1;">
			<div v-for="(item,index) in lesson_list" @click="choice(index)"  style="background: #FFFFFF;padding: 0.5rem;border-bottom: solid 1px #868686;">
				<flexbox>
			      <flexbox-item :span="1"><div class="flex-demo">
			      	<span v-if="item.choiceClass == true" style="font-size: 2rem;" class="iconfont icon-weixuanzhongyuanquan"></span>
			      	<span v-else style="font-size: 2rem;" class="iconfont icon-selected"></span>
			      </div></flexbox-item>
			      <flexbox-item><div class="flex-demo">
			      	<img style="width: 100%;" :src="item.cover_pic"/>
			      </div></flexbox-item>
			      <flexbox-item><div class="flex-demo" style="text-align: left;line-height: 2rem;font-size: 0.8rem;">
			      	<div>{{item.name}}</div>
			      	<div>时间:1年</div>
			      	<div v-if="item.price != ''">价格:￥{{item.price}}</div>
			      </div></flexbox-item>
			    </flexbox>
			</div>
		</div>
		
		<div style="width:100%;position: fixed;bottom: 3.2rem;background: #FFFFFF;">
			<div>
				<group>
			      <x-switch @on-change="changeMoney(value)" v-model="value" style="color: #8F3DC5;background: #F7F7F7;"  :title="level_detail"  ></x-switch>
			    </group>
			    
			</div>
			<div style="font-size: 1.3rem;line-height: 3rem;">
	    		<flexbox>
			      <flexbox-item><div class="flex-demo" style="color: #E30617;">合计：￥{{totalMoney}}</div></flexbox-item>
			      <flexbox-item style="margin-left: 0;">
			      	<div @click="settlement" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">结算</div>
			      </flexbox-item>
			    </flexbox>
	    	</div>
		</div>
		<toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="message" ></toast>
		
	<tab></tab>	
		
	</div>
	
	
	
</template>

<!--<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>-->

<script>
	import { Swiper ,XSwitch, Group,Toast,base64} from 'vux'
	import wx from 'weixin-js-sdk'
	
	export default {
		
		components: {
		    Swiper,
		    XSwitch,
		    Group,
		    Toast,
		    base64
		},
		
		data () {
	    	return {
		      
//		      userintegral:'',
//		      classintegral:'',
              intergral:'',
		      totalintegral:0,
		      
		      demo07_index: 0,
		      
		      banner_list:'',
		      lesson_list:'',
		      level_list:'',
		      user_info:'',
		      level_info:'',
		      level_user:'',
		      levelTotal: '0',
		      level_detail:'可用0积分抵用0元',
		      lesson_info:'',
		      totalMoney:0,
		      value:false,
		      
		      appId:'',
		      nonceStr:'',
		      pacKage:'',
		      paySign:'',
		      signType:'',
		      timeStamp:'',
		      
		      
		      access_token:'',
		      switchJudge:false,
		      
		      newBanner:[],
		      id:'',
		      
		      showPositionValue:false,
		      message:'',
		      
		      judgechange:true
 
		    }

	    },
	    
	    methods: {
	    	
	    	demo07_onIndexChange (index) {
		      this.demo07_index = index
		    },
		    
	    	autoPlay () {
		      this.mark++;
		      if (this.mark == 3) {
		        this.mark = 0
		      }
		    },
		    play () {
		      this.timer = setInterval(this.autoPlay, 2500)
		    },
		    change (i) {
		      this.mark = i
		    },
		    stop () {
		      clearInterval(this.timer)
		    },
		    move () {
		      this.timer = setInterval(this.autoPlay, 2500)
		    },
		    
		    
		    //获取详情
		    getDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'userdd/vip-index&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.banner_list = response.body.data.banner_list,
					this.user_info = response.body.data.user_info
					
					for(var i = 0 ; i < response.body.data.level_list.length ; i ++){
						response.body.data.level_list[i].choiceDetail = true
					}
					
					for(var i = 0 ; i < response.body.data.lesson_list.length ; i ++){
						response.body.data.lesson_list[i].choiceClass = true
					}
					
					
					for(var i = 0 ; i < response.body.data.banner_list.length ; i ++){
						
						var bannerObj = {};
						
						bannerObj.img = this.banner_list[i].pic_url;
						bannerObj.page_url = this.banner_list[i].page_url
						this.newBanner.push(bannerObj)
						 
					}
					
					if(this.user_info.level_name == ""){
						
						this.judgechange = false
						
					}
					
					
					this.lesson_list = response.body.data.lesson_list,
					this.level_list = response.body.data.level_list,
					
					console.log(this.lesson_list)
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		    },
		    
		    
		    //选择会员
		    choiceLevel(index){
		    	
		    	for(var i = 0 ;i < this.level_list.length ; i ++){
		    		
		    		if(i == index){
		    			this.level_list[i].choiceDetail = false ;
		    		}else{
		    			this.level_list[i].choiceDetail = true ;
		    		}
		    		
		    	}
		    	
		    	for (var i = 0 ; i < this.lesson_list.length ; i ++) {
		    		this.lesson_list[i].choiceClass = true
		    	}
		    	
		    	this.lesson_list = this.lesson_list,
		    	this.value = false
		    	this.switchJudge = true
		    	
		    	console.log(this.level_list[index])
		    	
		    	//会员预览
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'vip-order/submit-preview&access_token=' + this.access_token + '&id=' + this.level_list[index].id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.level_info = response.body.data.level_info,
					this.level_user = response.body.data.user
					this.intergral = response.body.data.user.integral
					this.id = response.body.data.level_info.id
					
					console.log(this.level_info)
					console.log(this.level_user)
					
					this.level_detail = '可用' + this.level_user.integral + '抵用' + this.level_user.integral2money + '元'
					this.levelTotal = this.level_info.price
					this.totalMoney = this.level_info.price
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
		    	
		    		
		    },
		   
		    //选择课程
		    choice(index){
		    	
		    	
		    	for(var i = 0 ;i < this.lesson_list.length ; i ++){
		    		
		    		if(i == index){
		    			this.lesson_list[i].choiceClass = false ;
		    		}else{
		    			this.lesson_list[i].choiceClass = true ;
		    		}
		    		
		    	}
		    	
		    	for (var i = 0 ; i < this.level_list.length ; i ++) {
		    		this.level_list[i].choiceDetail = true
		    	}
		    	
		    	this.level_list = this.level_list
		    	this.value = false
		    	this.switchJudge = true
		    	//课程预览
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'lesson-order/submit-preview&access_token=' + this.access_token + '&id=' + this.lesson_list[index].id)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.lesson_info = response.body.data.lesson_info,
					this.level_user = response.body.data.user
					this.intergral = response.body.data.user.integral
					this.id = response.body.data.lesson_info.id
					
					console.log(this.lesson_info)
					console.log(this.level_user)
					
					this.level_detail = '可用' + this.level_user.integral + '抵用' + this.level_user.integral2money + '元'
					this.levelTotal = this.lesson_info.price
					this.totalMoney = this.lesson_info.price
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				}, (response) => {
	                 
	                 
				});
		    	
		    	
		    },
		  
		    
		    //结算
		    settlement(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'web-wechat-order/vip-submit',
		    	{
		    		access_token:this.access_token,
		    		id:this.id,
		    		num:1,
		    		use_integral:this.totalintegral,
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
		    		this.message = response.body.msg
				
				if(response.body.code == 0) {
					
					console.log(111111)
					
					if(response.body.msg == "订单支付成功"){
						
						console.log(222222222)
						this.showPositionValue = true
						
						
					}else{
						
						console.log(333333)
						WeixinJSBridge.invoke(
					        'getBrandWCPayRequest', {
					            'appId':response.body.res.appId,     //公众号名称，由商户传入     
					            'timeStamp':response.body.res.timeStamp,         //时间戳，自1970年以来的秒数     
					            'nonceStr':response.body.res.nonceStr, //随机串     
					            'package':response.body.res.package,     
					            'signType':response.body.res.signType,         //微信签名方式：     
					            'paySign':response.body.res.paySign //微信签名 
					        },
					        function(res){
					       	    console.log(res)
					            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
					        }
				        );
					}
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
				
				
		    },
		    
		    //选择器
		    changeMoney(value){
		    	
		    	console.log(this.levelTotal)
		    	
		    	if(this.levelTotal == 0){
		    		this.totalMoney = 0
		    		this.totalintegral = 0
		    	}else{
		    		
		    		if( value == true ){
		    			this.totalintegral = this.intergral
			    		this.totalMoney = this.levelTotal - this.level_user.integral2money
			    	}else{
			    		this.totalintegral = 0
			    		this.totalMoney = this.levelTotal
			    	}
			    	
		    	}
		    	
		    	console.log(this.totalintegral)
		    	
		    	
		    },
		    
		    
		    //获取地址栏信息
			getUrlStr(name){
		      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
		      if(reg.test(window.location.href)){
		        return unescape(RegExp.$2.replace(/\+/g," "))
		      }
		      return undefined
		    },
		    
	    },
	    
	    mounted(){
	    	
	    	var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
           
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
    	   this.access_token = localStorage.getItem('access_token');
			
			this.getDetail()
//			this.getuserInfo()
//			this.getWebChat()
			
		}
		
	}
</script>

<style>
	
</style>